<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 病人管理</el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
            </el-breadcrumb>
        <el-table :data="data" border style="width: 100%;margin-top:30px" ref="multipleTable" v-loading="loading" >
           <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" sortable width="80">
            </el-table-column>
            <el-table-column prop="name" label="名字"  width="150">
            </el-table-column>
            <el-table-column prop="sex" label="性别"  width="100">
            </el-table-column>  
            <el-table-column prop="age" label="年龄"  width="100">
            </el-table-column>
            <el-table-column prop="phone" label="电话"  width="150">
            </el-table-column>  
            <el-table-column prop="wechat" label="QQ/微信"  width="150">
            </el-table-column> 
            <el-table-column prop="new_content" label="咨询内容"  width="150">
            </el-table-column>     
            <el-table-column prop="patient_type_id" label="病患类型"  width="150">
            </el-table-column> 
            <el-table-column prop="deportment_id" label="所属科室"  width="150">
            </el-table-column> 
            <el-table-column prop="media_id" label="媒体来源"  width="150">
            </el-table-column>   
            <el-table-column label="操作" >
                <template scope="scope">
                	<i class="el-icon-share"	@click="detail(scope.$index)" style="margin-right:10px" title="查看详情"></i>
                	<i class="el-icon-edit" style="margin-right:10px" title="修改"></i>
                	<i class="el-icon-delete" @click="Delete(scope.row.id)" title="删除"></i>
                </template>
            </el-table-column>           
        </el-table>
             <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="count"
                    :page-size="showpage">
            </el-pagination>
        </div>
        </div>
		<el-dialog title="病人信息详情" :visible.sync="info_detail">
			<table class="detail_table">
				<tr>
					<td width="120px" style="font-weight:bold">名称:</td>
					<td width="520px">{{ data_detail.name || ''}}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">性别:</td>
					<td width="520px">{{ data_detail.sex || '' }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">年龄:</td>
					<td width="520px">{{ data_detail.age }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">电话:</td>
					<td width="520px">{{ data_detail.phone }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">QQ/微信:</td>
					<td width="520px">{{ data_detail.wechat }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">咨询内容:</td>
					<td width="520px">{{ data_detail.content }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">病患类型:</td>
					<td width="520px">{{ data_detail.patient_type_id  }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">所属科室:</td>
					<td width="520px">{{ data_detail.deportment_id }}</td>
				</tr>
			<tr>
					<td width="120px" style="font-weight:bold">媒体来源:</td>
					<td width="520px">{{ data_detail.media_id }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">地区来源:</td>
					<td width="520px">{{ data_detail.zone_id }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">专家号:</td>
					<td width="520px">{{ data_detail.expert_number }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">预约时间:</td>
					<td width="520px">{{ data_detail.push_date }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">备注:</td>
					<td width="520px">{{ data_detail.intro }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">回访记录:</td>
					<td width="520px">{{ data_detail.back_intro }}</td>
				</tr>
				<tr>
					<td width="120px" style="font-weight:bold">是否到诊:</td>
					<td width="520px">{{ data_detail.come_state }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">到诊时间:</td>
					<td width="520px">{{ data_detail.come_date }}</td>
				</tr>	
				<tr>
					<td width="120px" style="font-weight:bold">接待医生:</td>
					<td width="320px">{{ data_detail.doctor_id }}</td>
				</tr>										
			</table>
		</el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
            	loading:true,
            	tableData:[],
            	info_detail:false,
            	data_detail:'',
                cur_page: 1,
                showpage:15,
                total:0,
            }
        },
        created(){
        	//获取病人信息
        	this.get_patient_data();
        },
        computed: {
        	data(){
        		return this.tableData.filter(function (d) {
        			if(d.age != null){
                  		d.age=d.age+'岁';
        			}
                  	if(d.sex == '0'){
                  		d.sex ='女';
                  	}else if(d.sex == '1'){
               			d.sex ='男';
                  	}
                  	if(d.content != null){
                  		if(d.content.length>12){
                  			d.new_content=d.content.substring(0,12)+'...';
                  		}
                  	}
         			
                  	return d;
                })
        	},
        	count(){
            	return parseInt(this.total);
            }
        },
        watch:{
     
        },
        methods: {
        	Delete(id){
                //self.tableData = res.data.list;
		      this.$http({
		          method:'delete',
		          url:'http://www.yuyue.com/api/patient/'+id
		      }).then(function(info){
		      		var data=info.data;
		      		if(data.code == 200){
		      			this.throw_notice('删除成功');
		      			this.get_patient_data();
		      		}else{
		      			this.throw_notice(data.msg);
		      		}
		      },function(error){
		          if(error.code == 500){
		          	this.throw_notice('服务器错误!');
		          }else{
		          	this.throw_notice('数据异常!');
		          }
		      })
        	},
        	get_patient_data(){
                let self = this;
                //self.tableData = res.data.list;
		      this.$http({
		          method:'get',
		          url:'http://www.yuyue.com/api/patient?page='+self.cur_page+'&showpage='+self.showpage
		      }).then(function(info){
		      		var data=info.data;
		      		if(data.code == 200){

		      			self.tableData=data.data.data;
		      			self.loading=false;
		      			self.total=data.data.total;
		      		}
		      },function(error){
		          if(error.code == 500){
		          	this.throw_notice('服务器错误!');
		          }else{
		          	this.throw_notice('数据异常!');
		          }
		      })
        	},
        	detail(index){
        		this.data_detail="";
        		this.info_detail=true;
  				this.data_detail=this.tableData[index];
        	},
        	delete(id){

        	},
            handleCurrentChange(val){
                this.cur_page = val;
                this.get_patient_data();
            }
        }
    }
</script>

<style scoped>
.handle-box{
    margin-bottom: 20px;
}
.handle-select{
    width: 120px;
}
.handle-input{
    width: 300px;
    display: inline-block;
}
.detail_table{
	font:16px/22px 'PingFang SC';
}
.detail_table td{
	height: 45px;
	font:16px/45px 'PingFang SC';
}
</style>